<!DOCTYPE HTML>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
	<title>Validate Login & Register Forms Flat Responsive Widget Template :: w3layouts</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Validate Login & Register Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- Meta tag Keywords -->

	<!-- css files -->
	<link rel="stylesheet" href="/static/css/userRegisterStyle.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link href="/static/css/font-awesome.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
	<!-- title -->
	<h1>
		Validate Login & Register Forms
	</h1>
	<!-- //title -->

	<!-- content -->
	<div class="container-agille" id="app">
		<div class="formBox level-login">
			<div class="box boxShaddow"></div>
			<div class="box loginBox">
				<h3>公司注冊</h3>
				<form class="form" method="post">
					<div class="f_row-2">
						<input type="text" class="input-field" placeholder="Username" v-model="username" name="name" required>
					</div>
					<div class="f_row-2 last">
						<input type="password" name="password" placeholder="Password" v-model="password" class="input-field" required>
					</div>
					<input class="submit-w3" type="button" value="注册" @click="addUser">
				</form>
			</div>
			<div class="box forgetbox agile">
				<a href="#" class="back icon-back">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					 viewBox="0 0 199.404 199.404" style="enable-background:new 0 0 199.404 199.404;" xml:space="preserve">
						<polygon points="199.404,81.529 74.742,81.529 127.987,28.285 99.701,0 0,99.702 99.701,199.404 127.987,171.119 74.742,117.876 
			  199.404,117.876 " />
					</svg>
				</a>
				<h3>Reset Password</h3>
				<form class="form" action="#" method="post">
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
					<div class="f_row last">
						<label>Email Id</label>
						<input type="email" name="email" placeholder="Email" class="input-field" required>
						<u></u>
					</div>
					<button class="btn button submit-w3">
						<span>Reset</span>
					</button>
				</form>
			</div>
			<div class="box registerBox wthree">
				<span class="reg_bg"></span>
				<h3>公司注冊</h3>
				<form class="form" action="#" method="post">
					<div class="f_row-2">
						<input type="text" class="input-field" placeholder="Username" name="name" required>
					</div>
					<div class="f_row-2 last">
						<input type="password" name="password" placeholder="Password" id="password1" class="input-field" required>
					</div>
					<div class="f_row-2 last">
						<input type="password" name="password" placeholder="Confirm Password" id="password2" class="input-field" required>
					</div>
					<input class="submit-w3" type="submit" value="Register">
				</form>
			</div>
			<a href="#" class="regTag icon-add">
				<i class="fa fa-repeat" aria-hidden="true"></i>

			</a>
		</div>
	</div>

	<!-- Jquery -->
	<script src="/static/js/jquery-2.2.3.min.js"></script>
	<!-- //Jquery -->
	<!-- input fields js -->
	<script src="/static/js/input-field.js"></script>

	<script>
		let vm = new Vue({
			el:'#app',
			data:{
				username:'',
				password:''
			},
			methods:{
				addUser() {
					let formData = new FormData()
					formData.append('username',this.username)
					formData.append('password',this.password)
					axios.post('/user/companyRegister',formData).then(res=>{
						if (res.data){
							alert('注册成功 请登录')
							location.href = '/company/companyLogin'
						}
					})
				}
			}
		})
	</script>


</body>

</html>